<template>
    <div  class="article-box">
        <!-- 导航栏 -->
        <van-nav-bar fixed placeholder title="文章详情" @click-left="$router.back()" left-arrow></van-nav-bar>
        <!-- 标题栏 -->
        <h1 class="title">{{ detail.title }}</h1>
        <!-- 作者栏 -->
        <div class="aut-box">
            <div class="left-box">
                <van-image round fit="cover" :src="detail.aut_photo" />
                <div>
                    <div class="name">{{ detail.aut_name }}</div>
                    <div class="time">{{ $relvTime(detail.pubdate) }}</div>
                </div>
            </div>
            <div class="right-box">
                <van-button icon="plus" type="info" size="small" round>关注</van-button>
            </div>
        </div>
        <div class="box-content" v-html="detail.content">
        </div>
        <!-- 评论区 -->
        <MyCommont/>
    </div>

</template>

<script>
import { newsAPI } from '@/api/article'
import MyCommont from './MyCommont.vue'
export default {
  name: 'MyArticle',
  components: {
    MyCommont
  },
  data () {
    return {
      detail: {}

    }
  },
  async created () {
    const res = await newsAPI(this.$route.params.id)
    this.detail = res.data
    console.log(res)
  }
}
</script>

<style lang="less" scoped>
.article-box {
    padding: 0 15px;

    .title {
        padding: 15px 0;
        font-size: 18px;
    }

    .aut-box {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 15px;

        .left-box {
            display: flex;
            align-items: center;

            .van-image {
                width: 80px;
                height: 80px;
                margin-right: 10px;
            }

            .time {
                color: gray;
                font-size: 12px;
                margin-top: 10px;
            }
        }
    }

    .box-content {
        ::v-deep {
            .img {
                width: 100%;
            }

            p {
                width: 100%;
                word-break: break-all;
            }

            code {
                background-color: #000;
                color: gray;
                width: 100%;
                display: inline-block;
                overflow: auto;
            }
        }

    }
}
</style>
